<template>
  <div class="fl">
    <div id="app" v-if="imageUrl == '' && imgFlag == false">
      <el-upload
        name="file"
        class="avatar-uploader"
        :headers="upload.headers"
        :action="upload.url"
        :show-file-list="false"
        :on-error="handleError"
        :on-success="handleSuccessVideo"
        :on-progress="uploadProcess"
        :before-upload="videoBeforeUpload"
        accept=".webm,.mp4"
      >
        <div class="banner-uploader-icon">
          <i class="el-icon-upload icon-img"></i>
          <div class="el-upload__text">上传</div>
        </div>
      </el-upload>
    </div>

    <div class="videoBox" v-if="imgFlag">
      <div v-loading="true" class="loadBox"></div>
    </div>
    <div class="vi" v-if="imageUrl">
      <video
        style="width: 300px"
        v-if="imageUrl"
        :src="imageUrl"
        controls
        controlsList="nodownload"
      ></video>
      <span class="close-btn" v-if="imageUrl" @click.stop="videoDel()"></span>
    </div>
    <div class="msg" v-if="imageUrl == '' && imgFlag == false">
      只能上传房屋视频，最多上传1张，每张最大300M
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/util.js";
import { host } from "@/utils/config.js";
import { request } from "@/utils/request.js";

export default {
  props: {
    tip: {
      type: String,
      default: "视频大小不超过300M",
    },
  },
  data() {
    return {
      imgFlag: false,
      imageUrl: "",
      percent: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      listObj: {},
      addform: {
        fileList: [],
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        url: host + "/oss/upload",
      },
    };
  },
  methods: {
    videoDel() {
      this.imageUrl = "";
      this.imgFlag = false;
      this.$emit("videoDel");
    },
    handleSuccessVideo(response) {
      console.log(123, response);
      this.imgFlag = false;
      // this.percent = 0;
      if (response.code == 200) {
        this.imageUrl = response.data.url;
        this.$emit("videoSuccess", response.data.url);
      } else {
        this.$message.error("视频上传失败，请重新上传！");
      }
    },
    handleError(err, file, fileList) {
      // 上传失败异常处理
      const error = JSON.parse(JSON.stringify(err));
      console.log(err);
      console.log(error);
      this.$message.error(error.status.toString());
      this.imgFlag = false;
      this.imageUrl = "";
      this.percent = 0;
    },
    videoBeforeUpload(file) {
      console.log(file);
      const _self = this;
      const isVideo =
        file.type === "video/webm" ||
        file.type === "video/mp4";
      // const isVideo =
      //   file.type === "video/mpeg" ||
      //   file.type === "video/navi" ||
      //   file.type === "video/asf" ||
      //   file.type === "video/avi" ||
      //   file.type === "video/wmv" ||
      //   file.type === "video/3gp" ||
      //   file.type === "video/mp4" ||
      //   file.type === "video/mov";
      const isLt30M = file.size / 1024 / 1024 < 300;
      if (!isVideo) {
        this.$message.warning("请上传正确格式的视频！");
        return false;
      } else {
        if (!isLt30M) {
          this.$message.warning("上传视频文件大小不能超过 300MB!");
          return false;
        }
      }
    },
    uploadProcess(event, file, fileList) {
      this.imgFlag = true;
      console.log(event.percent);
      this.percent = Math.floor(event.percent);
    },
  },
};
</script>

<style lang="scss" scoped>
.fl {
  display: flex;
  align-items: flex-end;
  position: relative;
  .msg {
    font-size: 12px;
    color: #606266;
    margin-top: 7px;
    height: 20px;
    margin-left: 10px;
    line-height: 20px;
  }
}
#app {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px dashed #f1f2f4;
  background: #f1f2f4;
  border-radius: 2px;
  display: flex;
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
  }
}
.videoBox {
  position: relative;
  width: 100px;
  min-height: 100px;
  .loadBox {
    width: 100px;
    height: 100px;
    background-color: #f1f2f4;
  }
}
.vi {
  position: relative;
}
.close-btn {
  position: absolute;
  right: -7px;
  top: -9px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: url("../../../../assets/image/finance/close-img.png") no-repeat center;
}
.banner-uploader-icon {
  display: inline-block;
  font-size: 12px;
  color: #045db9;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px dashed #f1f2f4;
  background: #f1f2f4;
  border-radius: 2px;
  vertical-align: top;
}
.banner-uploader-icon .icon-img {
  font-size: 26px;
  margin-top: 20px;
}
.banner-uploader-icon .el-upload__text {
  line-height: 5px;
  font-size: 14px;
}
</style>


